<!--  -->
<script setup>
import CancelBtn from '@/components/button/CancelBtn.vue'
import SubmitBtn from '@/components/button/SubmitBtn.vue'
import SimpleInput from '@/components/input/SimpleInput.vue'
import PasswordInput from '@/components/input/PasswordInput.vue'
import Tip from '@/components/tip'
import { changeUserEmailAPI, changeUserPasswordAPI } from '@/apis/user'
import { useBreadsStore, useUserStore } from '@/stores'
import { ref } from 'vue'

const props = defineProps(['userInfo'])
const showTab1 = ref(false)
const showTab2 = ref(false)

const userStore = useUserStore()
const { setBreadCrumbs } = useBreadsStore()
setBreadCrumbs([
  { title: '账号设置', path: '/users/settings' },
  { title: '账号' }
])

const mailForm = ref({
  id: props.userInfo.user.id,
  passwd: '',
  email: ''
})

const passwdForm = ref({
  id: props.userInfo.user.id,
  rawPasswd: '',
  newPasswd: '',
  newPasswdConfirm: ''
})

function hideSomeInfo(email) {
  if (!email) return '未设置'
  return email.replace(/(.{2}).*(.{2}@.*)/, '$1****$2')
}

function handleChangeEmail() {
  if (!mailForm.value.passwd) {
    Tip.error('密码不能为空')
    return
  }
  if (!mailForm.value.email) {
    Tip.error('邮箱不能为空')
    return
  }

  changeUserEmailAPI(mailForm.value).then(() => {
    Tip.success('修改成功')
    userStore.refreshUserInfo()
    showTab1.value = false
  }).catch((err) => {
    Tip.error(err.message)
  })
}

function handleChangePasswd() {
  if (!passwdForm.value.rawPasswd) {
    Tip.error('原密码不能为空')
    return
  }
  if (!passwdForm.value.newPasswd) {
    Tip.error('新密码不能为空')
    return
  }
  if (passwdForm.value.newPasswd.length < 6) {
    Tip.error('密码长度不能小于6位')
    return
  }
  if (passwdForm.value.newPasswd !== passwdForm.value.newPasswdConfirm) {
    Tip.error('两次密码不一致')
    return
  }

  changeUserPasswordAPI(passwdForm.value).then(() => {
    Tip.success('修改成功')
    showTab2.value = false
  }).catch((err) => {
    Tip.error(err.message)
  })
}

</script>

<template>
  <div class="view-container user-settings-form">
    <h1>账号</h1>
    <div class="label">电子邮件地址 <span class="desc"></span></div>
    <div v-if="showTab1" class="container">
      <PasswordInput v-model="mailForm.passwd" label="密码"></PasswordInput>
      <SimpleInput v-model="mailForm.email" label="邮箱"></SimpleInput>
      <div class="flex-between">
        <SubmitBtn @click="handleChangeEmail">保存</SubmitBtn>
        <CancelBtn @click="showTab1 = false">取消</CancelBtn>
      </div>
    </div>
    <div v-else>
      <div style="margin-bottom:10px">{{ hideSomeInfo(props.userInfo.user.mail) }}</div>
      <SubmitBtn @click="showTab1 = true">更改邮箱</SubmitBtn>
    </div>
    <div class="label">密码 <span class="desc"></span></div>

    <div v-if="showTab2" class="container">
      <PasswordInput v-model="passwdForm.rawPasswd" label="原密码"></PasswordInput>
      <PasswordInput v-model="passwdForm.newPasswd" label="新密码"></PasswordInput>
      <PasswordInput v-model="passwdForm.newPasswdConfirm" label="再确认"></PasswordInput>
      <div class="flex-between">
        <SubmitBtn @click="handleChangePasswd">保存</SubmitBtn>
        <CancelBtn @click="showTab2 = false">取消</CancelBtn>
      </div>
    </div>
    <div v-else>
      <SubmitBtn @click="showTab2 = true">更改密码</SubmitBtn>
    </div>
  </div>
</template>


<style scoped lang="scss">
@import url('./style.scss');

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
}
</style>
